<%-- 
    Document   : index
    Created on : Apr 4, 2011, 7:49:58 PM
    Author     : swaggerx
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.5.2.js" ></script>
        <script type="text/javascript" src="highCharts_Demos.js" ></script>
        <script type="text/javascript" src="highcharts.js" ></script>
        <script type="text/javascript" src="jquery.msgbox.min.js" ></script>
        <script type="text/javascript" src="jquery.lightbox.js" ></script>
        <script type="text/javascript" src="jquery.dropdown.js" ></script>
        <link type="text/css" rel="stylesheet" href="jquery.msgbox.css" />
        <link type="text/css" rel="stylesheet" href="jquery.lightbox.css" />
        <link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />


        <script type="text/javascript" src="gray.js" ></script>
        <script type="text/javascript" >
            $(function() {
                jQuery('.lightbox').lightbox();

            });
            function ajaxCall(){
                $.ajax({
                    type: "POST",
                    url: "wiseGate",
                    data: "name=Ramon",
                    success: function(data, msg, xhr) {
                        if (xhr) alert("Success: " + data);
                    }
                });
            }
            function createChart() {
                makeChart();
            }
            function createMsgBox3() {
                $.msgbox("Are you sure that you want to permanently delete the selected element?", {
                    type: "confirm",
                    buttons : [
                        {type: "submit", value: "Yes"},
                        {type: "submit", value: "No"},
                        {type: "cancel", value: "Cancel"}
                    ]
                }, function(result) {
                    $("#result2").text(result);
                });
            }
            function createMsgBoxLogin() {
                $.msgbox("<p>In order to process your request you must provide the following:</p>", {
                    type    : "prompt",
                    inputs  : [
                        {type: "text",     label: "Insert your Name:", value: "George", required: true},
                        {type: "password", label: "Insert your Password:", required: true}
                    ],
                    buttons : [
                        {type: "submit", value: "OK"},
                        {type: "cancel", value: "Exit"}
                    ]
                }, function(name, password) {
                    if (name) {
                        $.msgbox("Hello <strong>"+name+"</strong>, your password is <strong>"+password+"</strong>.", {type: "info"});
                    } else {
                        $.msgbox("Bye!", {type: "info"});
                    }
                });
            }
        </script>
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <input type="button" value="ajax call" onclick="ajaxCall();" />
        <input type="button" value="create Chart" onclick="createChart();" />
        <input type="button" value="create Live Chart" onclick="makeLiveChart();" />
        <button onclick='$.msgbox("Insert your name below:", {type: "prompt"}, function(result) {if (result) {alert("Hello "+result);}});'>MsgBox</button>
        <button onclick="createMsgBox3();" >MsgBox 3</button>
        <button onclick="createMsgBoxLogin();" >Login</button>

        <a href="images/5.jpg" class="lightbox"><img src="images/m5.jpg" alt=""/></a>

        <label id="result2" ></label>

        <ul id="jDropDown" class="blue">
                <li class="home"><a href="#"><img src="images/homeIcon.png" alt="home"></a></li>
                <li><a href="#">Home page</a>
                    <div class="column_2" style="margin-left: 4px;">
                        <div class="column">
                            <img src="images/about.jpg" alt="about us" style="margin: 20px 0px 0px 10px;" />
                            <ul>
                                <li><a href="#">About us</a></li>
                                <li><a href="#">Documentation</a></li>
                                <li><a href="#">Copyright issues</a></li>
                            </ul>
                        </div>

                        <ul class="column">
                            <li><a href="#">Lorem ipsum text</a></li>
                            <li><a href="#">Dorem sid amed ipsum est</a></li>
                            <li><a href="#">Lorem ipsum</a></li>
                            <li><a href="#">Succidere est vita lorem</a></li>
                            <li><a href="#">Texting lorem ipsum</a></li>
                            <li><a href="#">Sid amet dorem upset</a></li>
                            <li><a href="#">Lorem ipsum text</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="#">Prueba</a>
                    <div class="column_2" style="margin-left: 4px;" >
                    </div>
                    <div class="column" >
                        
                    </div>
                </li>
        </ul>

        <span><div id="container" style="width: 400px; height: 400px;" ></div>
            <div id="container2" style="width: 400px; height: 400px;" ></div>
        </span>
    </body>
</html>
